<!DOCTYPE html>
<!--
  ~ Copyright (c) 2016.
  ~ Private license for beyondts.
  ~ Contact beyondts for using, beyondts999@163.com
  -->

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Modal</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/beyondts.js"></script>
</head>
<body id="aaa">
<form>
    <div>
        <input type="hidden" name="hd" style="border: 1px solid #F00"/><br/>
        <input type="text" name="test" style="border: 1px solid #000"/><br/>
        <input type="text" name="test2" style="border: 1px solid #000"/><br/>
        <button type="button" class="btn btn-default" id="modalBTN">openModal</button>
        <button type="button" class="btn btn-default" id="errorBTN">showError</button>
        <button type="button" class="btn btn-default" id="msgBTN">showMsg</button>
        <button type="button" class="btn btn-default" id="confirmBTN">showConfirm</button>
        <a href="test2.html">test2.html</a>
        <input type="image" alt="image-btn" src="images/robot.jpg" />
    </div>
</form>

<script type="text/javascript">
    //$.support.transition = false
    $("#modalBTN").click(function() {
        openModal({
            backdrop: "static",
            title: "the is an example of modal",
            content: "you can find me here",
            url: "content1.html",
            /*afterLoaded: function(resp, status, xhr) {
                alert(status);
            },
            whenShow: function(ev) {
                alert($(ev.target).attr("id") + " show");
            },
            afterShown: function(ev) {
                alert($(ev.target).attr("id") + " shown");
            },
            whenHide: function(ev) {
                alert($(ev.target).attr("id") + " hide");
            },
            afterHidden: function(ev) {
                alert($(ev.target).attr("id") + " hidden");
            }*/
        });
    });
    $("#errorBTN").click(function() {
        title = $("<span/>").append("abc");
//        title = "this is error";
        content = $("<span/>").append("content info");
//        content = "here shows error infomation"
        stack = ["some stack : ", "stack1", "stack2"]
//        stack = "some stack here\n\tstack1<br/>\tstack2";
        showError(title, content, stack);
    });
    $("#msgBTN").click(function() {
        showMsg("this is a message", "i'm glad to meet you!");
    });
    $("#confirmBTN").click(function() {
        showConfirm("this is a confirm dialog", "are u sure you want to do this ?", function() {
            //alert("ok");
        }, function() {
            //alert("canceled");
        });
    });
</script>
</body>
</html>